<template>
  <div id="main">
     <div class="item-box">
        <el-card shadow="hover"  @click="$router.push(`/articleDetail/${item.uid}`)" class="item" v-for="(item,index) in itemListDataObj" :key="index">
             <el-row>
                 <el-col :span="14" class="item-left">
                    <h2>{{item.title}}</h2>
                    <p class="text">{{item.content}}</p>
                    <p class="span"> 
                        <span v-text="getDateYear(item.create_time)"> </span>
                        <span>前发布 | </span>
                        <span>{{item.commitNum}} 条评论</span>
                    </p>
                    
                 </el-col>

                 <el-col :span="8" :offset="2" class="item-right">
                     <img :src="item.cover" alt="">
                 </el-col>
             </el-row>
            
        </el-card>
        <el-card v-if="itemListDataObj.length == 0">
            暂时获取不到数据
        </el-card>

         <!-- 底部 -->
         <el-row class="footer">
             <el-col :span="3" >
                <el-button class="btn" @click.native="paging(true)">下一页 <i class="el-icon-right"></i></el-button>
             </el-col>
             <el-col :span="3" :offset="1" v-show="indexPage > 1">
                <el-button class="btn" @click.native="paging(false)">上一页 <i class="el-icon-back"></i></el-button>
             </el-col>
         </el-row>
     </div>
  </div>
</template>

<script>
import { computed, defineComponent,reactive, ref } from 'vue'
import useGetMonth from '../hooks/userGetMonth'

import { getBlogList } from '../api/index'
import { ElMessage } from 'element-plus'
export default defineComponent({
    name:'HomeRight',
    setup(){
        const getDateYear = computed(()=>{
            return function(dataStr){
               return useGetMonth(dataStr)
            }
        })
        let itemListDataObj = reactive([])
        
        // 当前页的数码
        let indexPage  = ref(1)
        //获取文章列表
        getBlogListData(1,6)
        async function getBlogListData(page,num){
            let { code ,message,data} = await getBlogList(page,num)
            if ( code === 200 && message === '获取成功'){
                //清除之前数组数据
                console.log(data,'-0----------')
                itemListDataObj.length = 0
                //添加获取到的数据
                itemListDataObj.push(...data)
            }else{
                console.log(code ,message,data)
                console.log(message)
                ElMessage.error('暂无新文章列表');
            }
        }

        //分页效果:flag为真表示下一页，假为上一页
        function paging(flag){
            flag ?  indexPage.value++ : indexPage.value--
            getBlogListData(indexPage.value,6)
        }
        return {
            indexPage,
            itemListDataObj,
            getDateYear,
            paging
        }
    }
})

</script>
<style lang="less" scoped>
#main{
    position: relative;
    width: 100%;
    height: 100%;
    transition: all 4s ease 0s;
    .item-box{
        width: 90%;
        padding: 4%;
        .item{
            display: flex;
            justify-content: space-between;
            margin: 30px 0px;

            &:hover{
                cursor: pointer;
            }
            .item-left{
                display: flex;
                flex-flow: column;
                justify-content: space-between;
                .text{
                    margin: 10px 0px;
                    font-size: 16px;
                    line-height: 1.625;
                    color: #555;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .span{
                    font-size: 12px;
                    color: #888;
                }
            }
            .item-right{
                height: 150px;
                img{
                    border-radius: 4px;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .footer{
        width: 90%;
        position: absolute;
        bottom: 0px;
        .btn{
            width: 100%;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
        }
    }
}
</style>